// src/router/authRoute.jsx
import React, { useEffect, useState } from 'react';
import { Navigate, useLocation } from 'react-router-dom';

/**
 * 身份验证路由组件
 * 检查本地存储中的token，如果不存在或无效则重定向到登录页面
 * @param {Object} props
 * @param {React.ReactNode} props.children - 子组件
 * @returns {React.ReactNode}
 */
const AuthRoute = ({ children }) => {
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const [loading, setLoading] = useState(true);
  const location = useLocation();

  useEffect(() => {
    // 检查本地存储中是否存在token
    const token = localStorage.getItem('token');
    
    // 验证token存在性
    if (token) {
      // 可以在这里添加token有效性验证逻辑
      // 例如检查token格式、过期时间等
      setIsAuthenticated(true);
    } else {
      setIsAuthenticated(false);
    }
    
    setLoading(false);
  }, []);

  // 如果正在加载，可以显示加载指示器
  if (loading) {
    return <div className="flex justify-center items-center h-screen">加载中...</div>;
  }

  // 如果未通过身份验证，重定向到登录页面，并保存当前URL以便登录后返回
  if (!isAuthenticated) {
    return <Navigate to="/login" state={{ from: location.pathname }} replace />;
  }

  // 如果通过身份验证，渲染子组件
  return children;
};

export default AuthRoute;
